<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单的增删改查</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tex{
            width: 80%;
            height: 25px;
            margin: 20px 0;
            margin-left: 10%;
            outline: none;
            text-indent: 2rem;
        }
        div{
            margin-top: 50px;
        }
        #inp4{
            width: 10%;
            height: 30px;
            /* border: none;
            border: 1px solid #ccc; */
            border-radius: 5px;
            margin: 20px 45%;
            outline: none;
        }
        table{
            width: 80%;
            margin: 20px 10%;
            text-align: center;
        }
        button{
            outline: none;
            border-radius: 5px;
            width: 50px;
        }
        tr{
            height: 30px;
        }
    </style>
</head>
<body>
    <div>
        <form>
            <input type="text" class="tex" id="inp1"><br>
            <input type="text" class="tex" id="inp2"><br>
            <input type="text" class="tex" id="inp3"><br>
            <input type="submit" id="inp4"><br>
        </form>
    </div>
    <table border="1"> 
        <thead>
            <tr>
                <td>姓名</td>
                <td>电话</td>
                <td>邮箱</td>
                <td>功能</td>
            </tr>
        </thead>
        <tbody id="tba">
            <tr>
                <td>李苗</td>
                <td>123321123321</td>
                <td>12332112@qq.com</td>
                <td>
                    <button>删除</button>
                    <button>更改</button>
                </td>
            </tr>
        </tbody>

    </table>
</body>
<script>
    inp4.onclick=function(e){
        e.preventDefault();
        var in1 = inp1.value;
        var in2 = inp2.value;
        var in3 = inp3.value;
        var opj = {
            name:in1,
            tal:in2,
            email:in3
        }
        var all = localStorage.getItem('list');
        if(all){
            all = JSON.parse(all);
            all.push(opj);
            localStorage.setItem('list',JSON.stringify(all))
        }else{
            localStorage.setItem('list',JSON.stringify([opj]))
        }
        console.log(all[all.length-1])
        var alll = all[all.length-1];
        console.log(alll.name);

        var tda = document.createElement("td");
        var pp = alll.name;
        var tdaa = document.createTextNode(alll.name);
        tda.appendChild(tdaa);
        var tra = document.createElement("tr");
        tra.appendChild(tda);
        console.log(tra)
        var tdb = document.createElement("td");
        var tdab = document.createTextNode(alll.tal);
        tdb.appendChild(tdab);
        tra.appendChild(tdb);
        
        var tdc = document.createElement("td");
        var tdac = document.createTextNode(alll.email);
        tdc.appendChild(tdac);
        tra.appendChild(tdc);

        var tdd = document.createElement("td");
        var a = document.createElement("button");
        var aa= document.createTextNode("删除");
        a.appendChild(aa);
        tdd.appendChild(a);
        var b = document.createElement("button");
        var bb= document.createTextNode("修改");
        b.appendChild(bb);
        tdd.appendChild(b);

        tra.appendChild(tdd);

        tba.appendChild(tra);
        console.log(tba)
    }
</script>
</html> 